<template>
  <div class="home">
    <menu-tag
      :menuList="menuList"
      :menuContList="menuContList"
      v-show="isShow"
      @hide="isShow = false"
      @changeMenu="changeMenu"
    ></menu-tag>
    <header>
      <header-tag></header-tag>
      <myinput placeholder="搜索" ipt="top_search"></myinput>
      <mybutton type="top_logo">打开APP</mybutton>
    </header>
    <nav>
      <nav-tag :navList="navList" @navChange="navChange" @menu="menu"></nav-tag>
    </nav>
    <div class="content">
      <router-view></router-view>
    </div>
    <bottom v-show="$route.path == '/all'" @backTop="backTop"></bottom>
  </div>
</template>

<script>
import header from "@/components/head/header";
import myinput from "@/components/myInput/myinput";
import mybutton from "@/components/myButton/mybutton";
import nav from "@/components/nav/nav";
import bottom from "@/components/bottom/bottom";
import menu from "@/components/menu/menu";
import { getMenu, getTypes } from "../utils/api/http";
export default {
  name: "Home",
  data() {
    return {
      navList: [],
      isShow: false,
      menuList: [],
      menuContList: [],
      menuListCopy: [],
    };
  },
  created() {
    getTypes().then((res) => {
      this.navList = res.data.data;
    });
  },
  methods: {
    changeMenu(val) {
      if (val == -1) {
        this.menuContList = JSON.parse(this.menuListCopy);
      } else {
        this.menuContList = JSON.parse(this.menuListCopy).filter((item) => {
          return item.cate1Id == val;
        });
      }
    },
    navChange(i, item) {
      this.$router.push({
        path: "/" + item,
        query: {
          type: item,
        },
      });
    },
    menu() {
      getMenu().then((res) => {
        this.isShow = true;
        this.menuList = res.data.data.cate1Info;
        this.menuContList = res.data.data.cate2Info;
        this.menuListCopy = JSON.stringify(res.data.data.cate2Info);
        console.log(res.data.data);
      });
    },
    backTop() {
      document.documentElement.scrollTop = 0;
    },
  },
  components: {
    headerTag: header,
    mybutton,
    myinput,
    navTag: nav,
    bottom,
    menuTag: menu,
  },
};
</script>
<style lang="scss" scoped>
header {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #fff;
  z-index: 10;

  .input {
    height: 100%;
    width: 3.4rem;
    display: flex;
    align-items: center;
    margin-top: 0.1rem;
  }

  .mybutton {
    width: 2rem;
    height: 100%;
    align-items: center;
    display: flex;
    align-items: center;
    padding-left: 0.7rem;
  }
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  font-size: 0.32rem;
  width: 100%;
  height: 1rem;
  margin-top: 0.9rem;
  background: #fff;
  z-index: 10;
}

.content {
  margin-top: 2.3rem;
  font-size: 0.36rem;
}
</style>
